<template>
  <view class="address-page">


    <!-- 主要内容区域 -->
    <scroll-view class="content-scroll" scroll-y>
      <!-- 个人信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">收货人信息</text>
          <text class="card-subtitle">请填写真实姓名和电话</text>
        </view>
        
        <!-- 姓名输入 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">姓名</text>
            <text class="required-mark" :style="{color: themeColorStyles.requiredColor}">*</text>
          </view>
          <view class="input-wrapper" :class="{ 'error': nameError, 'focused': nameFocused }" :style="nameInputStyle">
            <input 
              class="modern-input"
              v-model="addressForm.name"
              placeholder="请输入收货人姓名"
              maxlength="20"
              @focus="nameFocused = true"
              @blur="handleNameBlur"
            />
          </view>
          <text v-if="nameError" class="error-message">{{ nameError }}</text>
        </view>

        <!-- 电话输入 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">电话</text>
            <text class="required-mark" :style="{color: themeColorStyles.requiredColor}">*</text>
          </view>
          <view class="input-wrapper" :class="{ 'error': phoneError, 'focused': phoneFocused }" :style="phoneInputStyle">
            <input 
              class="modern-input"
              v-model="addressForm.phone"
              placeholder="请输入11位手机号码"
              type="number"
              maxlength="11"
              @focus="phoneFocused = true"
              @blur="handlePhoneBlur"
            />
          </view>
          <text v-if="phoneError" class="error-message">{{ phoneError }}</text>
        </view>
      </view>

      <!-- 地址信息卡片 -->
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">收货地址</text>
          <text class="card-subtitle">请选择详细的收货地址</text>
        </view>

        <!-- 省份选择 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">省份</text>
            <text class="required-mark" :style="{color: themeColorStyles.requiredColor}">*</text>
          </view>
          <picker 
            :value="provinceIndex"
            :range="provinces"
            range-key="name"
            @change="onProvinceChange"
          >
            <view class="picker-wrapper" :class="{ 'error': regionError }">
              <text class="picker-text" :class="{ 'placeholder': !addressForm.provinceName }">
                {{ addressForm.provinceName || '请选择省份' }}
              </text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
          <text v-if="regionError" class="error-message">{{ regionError }}</text>
        </view>

        <!-- 地区验证错误信息 -->
        <view v-if="regionError" class="input-group">
          <text class="error-message">{{ regionError }}</text>
        </view>

        <!-- 城市选择 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">城市</text>
            <text class="required-mark" :style="{color: themeColorStyles.requiredColor}">*</text>
          </view>
          <picker 
            :value="cityIndex"
            :range="cities"
            range-key="name"
            @change="onCityChange"
            :disabled="!addressForm.provinceCode"
          >
            <view class="picker-wrapper" :class="{ 'error': regionError, 'disabled': !addressForm.provinceCode }">
              <text class="picker-text" :class="{ 'placeholder': !addressForm.cityName }">
                {{ addressForm.cityName || '请选择城市' }}
              </text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
          <text v-if="regionError" class="error-message">{{ regionError }}</text>
        </view>

        <!-- 区县选择 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">区县</text>
            <text class="required-mark" :style="{color: themeColorStyles.requiredColor}">*</text>
          </view>
          <picker 
            :value="areaIndex"
            :range="areas"
            range-key="name"
            @change="onAreaChange"
            :disabled="!addressForm.cityCode"
          >
            <view class="picker-wrapper" :class="{ 'error': regionError, 'disabled': !addressForm.cityCode }">
              <text class="picker-text" :class="{ 'placeholder': !addressForm.areaName }">
                {{ addressForm.areaName || '请选择区县' }}
              </text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
          <text v-if="regionError" class="error-message">{{ regionError }}</text>
        </view>

        <!-- 详细地址 -->
        <view class="input-group">
          <view class="input-label">
            <text class="label-text">详细地址</text>
            <text class="required-mark" :style="{color: themeColorStyles.requiredColor}">*</text>
          </view>
          <view class="textarea-wrapper" :class="{ 'error': detailError, 'focused': detailFocused }" :style="detailInputStyle">
            <textarea 
              class="modern-textarea"
              v-model="addressForm.detail"
              placeholder="请输入详细地址，如街道、门牌号等"
              maxlength="100"
              auto-height
              @focus="detailFocused = true"
              @blur="handleDetailBlur"
            />
          </view>
          <text v-if="detailError" class="error-message">{{ detailError }}</text>
        </view>
      </view>

      <!-- 设置卡片 -->
      <view class="info-card">
        <view class="switch-group">
          <view class="switch-info">
            <text class="switch-title">设为默认地址</text>
            <text class="switch-subtitle">将此地址设为默认收货地址</text>
          </view>
          <switch 
            :checked="addressForm.isDefault"
            @change="onDefaultChange"
            :color="themeColorStyles.primaryColor"
          />
        </view>
      </view>

      <!-- 底部间距 -->
      <view class="bottom-space"></view>
    </scroll-view>

    <!-- 底部保存按钮 -->
    <view class="save-container">
      <button 
        class="save-button" 
        :class="{ 'disabled': loading }"
        :style="{background: themeColorStyles.primaryColor, boxShadow: themeColorStyles.saveBtnShadow}"
        @click="saveAddress"
        :disabled="loading"
      >
        <view v-if="loading" class="loading-content">
          <view class="loading-spinner"></view>
          <text class="save-text">{{ isEdit ? '保存中...' : '添加中...' }}</text>
        </view>
        <text v-else class="save-text">{{ isEdit ? '保存修改' : '保存地址' }}</text>
      </button>
    </view>
  </view>
</template>

<script>
import { getProvinces, getChildrenByParentId } from '@/api/region'
import { getUserAddress, addUserAddress, updateUserAddress } from '@/api/address'
import { checkLoginStatus, handleApiError } from '@/utils/loginCheck'
import { getThemePrimaryColor, getThemeColorFromGlobal } from '@/utils/theme'

export default {
  data() {
    return {
      // 编辑状态
      isEdit: false,
      addressId: null,
      loading: false,
      
      // 地址表单数据
      addressForm: {
        name: '',
        phone: '',
        provinceCode: '',
        provinceName: '',
        cityCode: '',
        cityName: '',
        areaCode: '',
        areaName: '',
        detail: '',
        isDefault: false
      },
      
      // 选择器数据
      provinces: [],
      cities: [],
      areas: [],
      
      // 选择器索引
      provinceIndex: 0,
      cityIndex: 0,
      areaIndex: 0,
      
      // 错误信息
      nameError: '',
      phoneError: '',
      regionError: '',
      detailError: '',
      
      // 焦点状态
      nameFocused: false,
      phoneFocused: false,
      detailFocused: false,
      
      // 主题色
      primaryColor: '#4A90E2'
    };
  },
  
  computed: {
    // 地区显示文本
    regionText() {
      if (this.addressForm.provinceName && this.addressForm.cityName && this.addressForm.areaName) {
        return `${this.addressForm.provinceName} ${this.addressForm.cityName} ${this.addressForm.areaName}`;
      }
      return '请选择省市区';
    },
    
    // 是否已选择地区
    hasSelectedRegion() {
      return this.addressForm.provinceName && this.addressForm.cityName && this.addressForm.areaName;
    },
    
    // 表单是否有效
    isFormValid() {
      return this.addressForm.name.trim() && 
             this.addressForm.phone.trim() && 
             this.addressForm.provinceName && 
             this.addressForm.cityName && 
             this.addressForm.areaName && 
             this.addressForm.detail.trim() &&
             !this.nameError && 
             !this.phoneError && 
             !this.regionError && 
             !this.detailError;
    },
    
    // 主题色样式
    themeColorStyles() {
      return this.setThemeColorVariables(this.primaryColor)
    },
    
    // 姓名输入框焦点样式
    nameInputStyle() {
      if (this.nameFocused) {
        const rgb = this.hexToRgb(this.themeColorStyles.primaryColor);
        return {
          borderColor: this.themeColorStyles.focusBorderColor,
          boxShadow: `0 0 0 6rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
        };
      }
      return {};
    },
    
    // 电话输入框焦点样式
    phoneInputStyle() {
      if (this.phoneFocused) {
        const rgb = this.hexToRgb(this.themeColorStyles.primaryColor);
        return {
          borderColor: this.themeColorStyles.focusBorderColor,
          boxShadow: `0 0 0 6rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
        };
      }
      return {};
    },
    
    // 详细地址文本域焦点样式
    detailInputStyle() {
      if (this.detailFocused) {
        const rgb = this.hexToRgb(this.themeColorStyles.primaryColor);
        return {
          borderColor: this.themeColorStyles.focusBorderColor,
          boxShadow: `0 0 0 6rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.1)`
        };
      }
      return {};
    },
    

  },
  
  async onLoad(options) {
    await this.initThemeColor();
    await this.initData();
    
    // 如果是编辑模式
    if (options.id) {
      this.isEdit = true;
      this.addressId = options.id;
      
      try {
        // 从API获取地址详情
        const response = await getUserAddress(this.addressId);
        if (response.code === 200 && response.data) {
          const addressData = response.data;
          this.addressForm = {
            name: addressData.receiverName || '',
            phone: addressData.receiverPhone || '',
            provinceCode: '', // 初始为空，后续通过名称匹配设置
            provinceName: addressData.province || '',
            cityCode: '', // 初始为空，后续通过名称匹配设置
            cityName: addressData.city || '',
            areaCode: '', // 初始为空，后续通过名称匹配设置
            areaName: addressData.district || '',
            detail: addressData.detailAddress || '',
            isDefault: addressData.isDefault === '1'
          };
          
          // 设置选择器索引
          await this.setPickerIndexes();
        } else {
          let errorMsg = '获取地址信息失败';
          if (response.msg) {
            errorMsg = response.msg;
          }
          uni.showToast({
            title: errorMsg,
            icon: 'none'
          });
        }
      } catch (error) {
        // console.error('获取地址详情失败:', error)
        await handleApiError(error)
      }
    }
  },
  
  methods: {
    // 初始化主题色
    async initThemeColor() {
      try {
        // 获取主题色配置
        const themeColor = await getThemeColorFromGlobal()
        
        // 判断是否为异步主题色（数字字符串表示需要从服务器获取）
        if (/^\d+$/.test(themeColor)) {
          // 异步获取主题色
          const primaryColor = await getThemePrimaryColor(themeColor)
          this.primaryColor = primaryColor
          // console.log('异步获取主题色 - 编辑地址页面:', themeColor, '主色调:', primaryColor)
        } else {
          // 同步获取主题色（直接使用颜色值）
          this.primaryColor = getThemePrimaryColor(themeColor)
          // console.log('同步获取主题色 - 编辑地址页面:', themeColor, '主色调:', this.primaryColor)
        }
      } catch (error) {
        // console.error('编辑地址页面主题色初始化失败:', error)
        // 使用默认主题色
        this.primaryColor = '#4A90E2'
      }
    },
    
    // 设置主题色变量
    setThemeColorVariables(color) {
      const rgb = this.hexToRgb(color)
      
      return {
        primaryColor: color,
        saveBtnBg: color,
        saveBtnShadow: `0 4rpx 16rpx rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.3)`,
        focusBorderColor: color,
        requiredColor: color
      }
    },
    
    // 十六进制颜色转RGB
    hexToRgb(hex) {
      const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
      return result ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16)
      } : { r: 74, g: 144, b: 226 }
    },
    
    // 初始化数据
    async initData() {
      try {
        const response = await getProvinces();
        if (response.code === 200 && response.data) {
          this.provinces = response.data.map(province => ({
            id: province.id || province.code,
            code: province.id || province.code,
            name: province.name
          }));
        } else {
          uni.showToast({
            title: '获取省份数据失败',
            icon: 'none'
          });
        }
      } catch (error) {
        // console.error('获取省份数据异常:', error)
        await handleApiError(error)
      }
    },
    
    // 设置选择器索引（编辑模式使用）
    async setPickerIndexes() {
      // 设置省份索引 - 通过名称匹配
      if (this.addressForm.provinceName) {
        const provinceIndex = this.provinces.findIndex(p => p.name === this.addressForm.provinceName);
        if (provinceIndex !== -1) {
          this.provinceIndex = provinceIndex;
          const province = this.provinces[provinceIndex];
          // 设置省份code
          this.addressForm.provinceCode = province.code;
          
          // 加载城市数据
          try {
            const cityResponse = await getChildrenByParentId(province.id);
            if (cityResponse.code === 200 && cityResponse.data) {
              this.cities = cityResponse.data.map(city => ({
                id: city.id || city.code,
                code: city.id || city.code,
                name: city.name
              }));
              
              // 设置城市索引 - 通过名称匹配
              if (this.addressForm.cityName) {
                const cityIndex = this.cities.findIndex(c => c.name === this.addressForm.cityName);
                if (cityIndex !== -1) {
                  this.cityIndex = cityIndex;
                  const city = this.cities[cityIndex];
                  // 设置城市code
                  this.addressForm.cityCode = city.code;
                  
                  // 加载区县数据
                  try {
                    const areaResponse = await getChildrenByParentId(city.id);
                    if (areaResponse.code === 200 && areaResponse.data) {
                      this.areas = areaResponse.data.map(area => ({
                        id: area.id || area.code,
                        code: area.id || area.code,
                        name: area.name
                      }));
                      
                      // 设置区县索引 - 通过名称匹配
                      if (this.addressForm.areaName) {
                        const areaIndex = this.areas.findIndex(a => a.name === this.addressForm.areaName);
                        if (areaIndex !== -1) {
                          this.areaIndex = areaIndex;
                          // 设置区县code
                          this.addressForm.areaCode = this.areas[areaIndex].code;
                        }
                      }
                    }
                  } catch (error) {
                    // console.error('加载区县数据失败:', error);
                  }
                }
              }
            }
          } catch (error) {
            console.error('加载城市数据失败:', error);
          }
        }
      }
    },
    

    
    // 处理姓名失去焦点
    handleNameBlur() {
      this.nameFocused = false;
      this.validateName();
    },
    
    // 处理电话失去焦点
    handlePhoneBlur() {
      this.phoneFocused = false;
      this.validatePhone();
    },
    
    // 处理详细地址失去焦点
    handleDetailBlur() {
      this.detailFocused = false;
      this.validateDetail();
    },
    
    // 验证收货人姓名
    validateName() {
      const name = this.addressForm.name.trim();
      if (!name) {
        this.nameError = '请输入收货人姓名';
      } else if (name.length < 2 || name.length > 20) {
        this.nameError = '姓名长度应在2-20个字符之间';
      } else {
        // 验证姓名格式（只允许中文、英文字母和空格）
        const nameRegex = /^[\u4e00-\u9fa5a-zA-Z\s]+$/;
        if (!nameRegex.test(name)) {
          this.nameError = '姓名只能包含中文、英文字母和空格';
        } else {
          this.nameError = '';
        }
      }
    },
    
    // 验证电话号码
    validatePhone() {
      const phone = this.addressForm.phone.trim();
      if (!phone) {
        this.phoneError = '请输入收货人电话';
        return;
      }
      
      // 简化的手机号验证规则：只检查是否为11位数字
      const phoneReg = /^\d{11}$/;
      if (phone.length !== 11) {
        this.phoneError = '手机号码必须为11位数字';
      } else if (!phoneReg.test(phone)) {
        this.phoneError = '手机号码只能包含数字';
      } else {
        this.phoneError = '';
      }
    },
    
    // 验证详细地址
    validateDetail() {
      const detail = this.addressForm.detail.trim();
      if (!detail) {
        this.detailError = '请输入详细地址';
      } else if (detail.length < 5) {
        this.detailError = '详细地址至少需要5个字符';
      } else if (detail.length > 200) {
        this.detailError = '详细地址不能超过200个字符';
      } else {
        // 验证地址格式（不能只包含特殊字符）
        const addressRegex = /^[\u4e00-\u9fa5a-zA-Z0-9\s\-#()（）号栋单元室楼层]+$/;
        if (!addressRegex.test(detail)) {
          this.detailError = '详细地址包含无效字符';
        } else {
          this.detailError = '';
        }
      }
    },
    
    // 验证地区选择
    validateRegion() {
      if (!this.addressForm.provinceName) {
        this.regionError = '请选择省份';
        return false;
      }
      if (!this.addressForm.cityName) {
        this.regionError = '请选择城市';
        return false;
      }
      if (!this.addressForm.areaName) {
        this.regionError = '请选择区县';
        return false;
      }
      this.regionError = '';
      return true;
    },
    
    // 验证所有必录字段
    validateAllFields() {
      this.validateName();
      this.validatePhone();
      this.validateDetail();
      
      // 验证省市区
      if (!this.addressForm.provinceCode || !this.addressForm.cityCode || !this.addressForm.areaCode) {
        this.regionError = '请选择完整的省市区信息';
      } else {
        this.regionError = '';
      }
      
      // 返回验证结果
      return this.isFormValid;
    },
    
    // 省份选择变化
    async onProvinceChange(e) {
      const index = e.detail.value;
      const province = this.provinces[index];
      
      this.addressForm.provinceCode = province.code;
      this.addressForm.provinceName = province.name;
      this.regionError = '';
      
      // 重置城市和区县
      this.addressForm.cityCode = '';
      this.addressForm.cityName = '';
      this.addressForm.areaCode = '';
      this.addressForm.areaName = '';
      this.regionError = '';
      
      // 强制更新视图以确保disabled状态正确更新
      this.$forceUpdate();
      

      
      // 加载城市数据
      try {
        const response = await getChildrenByParentId(province.id);
        if (response.code === 200 && response.data) {
          this.cities = response.data.map(city => ({
            id: city.id || city.code,
            code: city.id || city.code,
            name: city.name
          }));
        } else {
          this.cities = [];
        }
      } catch (error) {
        console.error('获取城市数据异常:', error);
        this.cities = [];
      }
      
      this.areas = [];
      
      this.provinceIndex = index;
      this.cityIndex = 0;
      this.areaIndex = 0;
    },
    
    // 城市选择变化
    async onCityChange(e) {
      const index = e.detail.value;
      const city = this.cities[index];
      
      this.addressForm.cityCode = city.code;
      this.addressForm.cityName = city.name;
      this.regionError = '';
      
      // 重置区县
      this.addressForm.areaCode = '';
      this.addressForm.areaName = '';
      this.regionError = '';
      
      // 加载区县数据
      try {
        const response = await getChildrenByParentId(city.id);
        if (response.code === 200 && response.data) {
          this.areas = response.data.map(area => ({
            id: area.id || area.code,
            code: area.id || area.code,
            name: area.name
          }));
        } else {
          this.areas = [];
        }
      } catch (error) {
        console.error('获取区县数据异常:', error);
        this.areas = [];
      }
      
      this.cityIndex = index;
      this.areaIndex = 0;
    },
    
    // 区县选择变化
    onAreaChange(e) {
      const index = e.detail.value;
      const area = this.areas[index];
      
      this.addressForm.areaCode = area.code;
      this.addressForm.areaName = area.name;
      this.areaError = '';
      
      this.areaIndex = index;
    },
    
    // 获取用户ID（使用统一的登录检测）
    async getUserId() {
      try {
        const loginResult = await checkLoginStatus()
        if (!loginResult.isLoggedIn) {
          return null
        }
        return loginResult.userId
      } catch (error) {
        console.error('获取用户ID失败:', error)
        return null
      }
    },
    
    // 默认地址开关变化
    onDefaultChange(e) {
      this.addressForm.isDefault = e.detail.value;
    },
    
    // 保存地址
    async saveAddress() {
      // 先进行全面校验
      this.validateAllFields()
      
      if (!this.isFormValid) {
        uni.showToast({
          title: '请完善地址信息',
          icon: 'none',
          duration: 2000
        })
        return
      }
      
      // 显示加载状态
      this.loading = true
      
      try {
        // 使用统一的登录检测
        const loginResult = await checkLoginStatus()
        if (!loginResult.isLoggedIn) {
          this.loading = false
          return
        }
        
        const userId = loginResult.userId
        
        // 构建地址数据
        const addressData = {
          userId: userId,
          receiverName: this.addressForm.name,
          receiverPhone: this.addressForm.phone,
          province: this.addressForm.provinceName,
          city: this.addressForm.cityName,
          district: this.addressForm.areaName,
          detailAddress: this.addressForm.detail,
          isDefault: this.addressForm.isDefault ? '1' : '0'
        }
        
        let response
        if (this.isEdit) {
          // 编辑模式
          addressData.addressId = this.addressId
          response = await updateUserAddress(addressData)
        } else {
          // 新增模式
          response = await addUserAddress(addressData)
        }
        
        if (response.code === 200) {
          uni.showToast({
            title: this.isEdit ? '修改成功' : '添加成功',
            icon: 'success',
            duration: 1500
          })
          
          // 通知父页面刷新数据
          uni.$emit('addressChanged', {
            type: this.isEdit ? 'update' : 'add',
            addressId: this.isEdit ? this.addressId : null
          });
          
          setTimeout(() => {
            uni.navigateBack()
          }, 1500)
        } else {
          uni.showToast({
            title: response.msg || '保存失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('保存地址失败:', error)
        await handleApiError(error)
      } finally {
        this.loading = false
      }
    }
  }
};
</script>

<style scoped>
/* 页面容器 */
.address-page {
  min-height: 100vh;
  background: #F5F5F5;
  display: flex;
  flex-direction: column;
}



/* 内容滚动区域 */
.content-scroll {
  flex: 1;
  padding: 24rpx 32rpx 0;
}

/* 信息卡片 */
.info-card {
  background: #FFFFFF;
  border-radius: 24rpx;
  margin-bottom: 24rpx;
  padding: 40rpx 32rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
  border: 1rpx solid rgba(74, 144, 226, 0.08);
}

/* 卡片头部 */
.card-header {
  margin-bottom: 40rpx;
}

.card-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.card-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  display: block;
}

/* 输入组 */
.input-group {
  margin-bottom: 32rpx;
}

.input-group:last-child {
  margin-bottom: 0;
}

/* 输入标签 */
.input-label {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.label-text {
  font-size: 32rpx;
  font-weight: 500;
  color: #333333;
}

.required-mark {
  font-size: 32rpx;
  color: #FF6B6B;
  margin-left: 8rpx;
}

/* 现代化输入框 */
.input-wrapper {
  position: relative;
  background: #FFFFFF;
  border: 2rpx solid #E8E8E8;
  border-radius: 16rpx;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.input-wrapper.focused {
  background: #FFFFFF;
  border-color: #4A90E2;
  box-shadow: 0 0 0 6rpx rgba(74, 144, 226, 0.1);
}

.input-wrapper.error {
  border-color: #FF6B6B;
  background: #FFF8F8;
}

.modern-input {
  width: 100%;
  height: 96rpx;
  padding: 0 24rpx;
  font-size: 32rpx;
  color: #1A1A1A;
  background: transparent;
  border: none;
  outline: none;
}

.modern-input::placeholder {
  color: #B8B8B8;
}

/* 文本域 */
.textarea-wrapper {
  position: relative;
  background: #FFFFFF;
  border: 2rpx solid #E8E8E8;
  border-radius: 16rpx;
  /* 简化过渡效果以提高小程序兼容性 */
  transition: all 0.3s ease;
}

.textarea-wrapper.focused {
  background: #FFFFFF;
  border-color: #4A90E2;
  box-shadow: 0 0 0 6rpx rgba(74, 144, 226, 0.1);
}

.textarea-wrapper.error {
  border-color: #FF6B6B;
  background: #FFF8F8;
}

.modern-textarea {
  width: 100%;
  min-height: 120rpx;
  padding: 24rpx;
  font-size: 32rpx;
  color: #1A1A1A;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  line-height: 1.5;
}

.modern-textarea::placeholder {
  color: #B8B8B8;
}

/* 选择器 */
.picker-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 96rpx;
  padding: 0 24rpx;
  background: #FFFFFF;
  border: 2rpx solid #E8E8E8;
  border-radius: 16rpx;
  /* 简化过渡效果以提高小程序兼容性 */
  transition: all 0.3s ease;
}

.picker-wrapper:active {
  background: #FFFFFF;
  border-color: #4A90E2;
  transform: scale(0.98);
}

.picker-wrapper.error {
  border-color: #FF6B6B;
  background: #FFF8F8;
}

.picker-wrapper.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.picker-text {
  font-size: 32rpx;
  color: #1A1A1A;
  flex: 1;
}

.picker-text.placeholder {
  color: #B8B8B8;
}

.picker-arrow {
  font-size: 32rpx;
  color: #8A8A8A;
  font-weight: 600;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

/* 错误信息 */
.error-message {
  font-size: 26rpx;
  color: #FF6B6B;
  margin-top: 12rpx;
  display: block;
  /* 移除动画以提高小程序兼容性 */
}

/* 移除复杂动画 */
/* @keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
} */

/* 开关组 */
.switch-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.switch-info {
  flex: 1;
}

.switch-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #1A1A1A;
  display: block;
  margin-bottom: 8rpx;
}

.switch-subtitle {
  font-size: 28rpx;
  color: #8A8A8A;
  display: block;
}

/* 底部间距 */
.bottom-space {
  height: 120rpx;
}

/* 保存按钮容器 */
.save-container {
  padding: 24rpx 32rpx 40rpx;
  background: #FFFFFF;
  border-top: 1rpx solid #F0F0F0;
}

/* 保存按钮 */
.save-button {
  width: 100%;
  height: 96rpx;
  /* 背景色和阴影由动态样式控制 */
  background: #E0E0E0; /* 默认禁用状态背景色 */
  border-radius: 24rpx;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 简化过渡效果 */
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.save-button:active {
  transform: scale(0.98);
}

.save-button.disabled {
  background: #E0E0E0;
  box-shadow: none;
  transform: none;
}

.save-text {
  font-size: 36rpx;
  font-weight: 600;
  color: #FFFFFF;
}

.save-button.disabled .save-text {
  color: #A0A0A0;
}

/* 加载内容 */
.loading-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16rpx;
}

/* 加载动画 */
.loading-spinner {
  width: 32rpx;
  height: 32rpx;
  border: 3rpx solid rgba(255, 255, 255, 0.3);
  border-top: 3rpx solid #FFFFFF;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* 响应式设计 */
@media (max-width: 750rpx) {
  .content-scroll {
    padding: 20rpx 24rpx 0;
  }
  
  .info-card {
    padding: 32rpx 24rpx;
    margin-bottom: 20rpx;
  }
  
  .card-title {
    font-size: 32rpx;
  }
  
  .card-subtitle {
    font-size: 26rpx;
  }
  
  .label-text {
    font-size: 30rpx;
  }
  
  .modern-input,
  .picker-text {
    font-size: 30rpx;
  }
  
  .modern-textarea {
    font-size: 30rpx;
  }
  
  .save-container {
    padding: 20rpx 24rpx 32rpx;
  }
  
  .save-button {
    height: 88rpx;
  }
  
  .save-text {
    font-size: 32rpx;
  }
}
</style>